<template>
	<div id="goods_refund_choose" class="container">
		<div class="title">
			退费
			<div class="close" @click="close()"></div>
		</div>

		<div class="info">
			<div>学员姓名：{{student.realName}}</div>
			<div>联系人：{{student.parentName}}</div>
			<div>联系电话：{{student.phone}}</div>
		</div>
		<div class="content">
			<div class="condition">
				<div class="tip">请选择商品</div>
			</div>
			
			<div class="table">
				<div class="thead">
					<div style="width: 0.8rem;"></div>
					<div style="width: 1.8rem;">名称</div>
					<div style="width: 1.2rem;">分类</div>
					<div style="width: 1.2rem;">单价</div>
					<div style="width: 1.2rem;">购买数量</div>
					<div style="width: 1.2rem;">总价</div>
					<div style="width: 1.2rem;">实际支付</div>
					<div style="width: 1.5rem;">购买时间</div>
				</div>
				<div class="tbody">
					<div class="tr_div" v-for="item in goodsList">
						<div class="tr">
							<div style="width: 0.8rem;margin-left: 0;background-position: center;" class="sub_icon" @click="checkGoods(item)"
								:class="checkList.indexOf(item.studentGoodsId)>-1? 'sub_icon_active':''"></div>
							<div style="width: 1.8rem;">{{item.goodsName}}</div>
							<div style="width: 1.2rem;">{{item.goodsMode}}</div>
							<div style="width: 1.2rem;">￥{{item.salesPrice}}</div>
							<div style="width: 1.2rem;">{{item.goodsNum}}</div>
							<div style="width: 1.2rem;">￥{{item.totalMoney}}</div>
							<div style="width: 1.2rem;">￥{{item.realMoney}}</div>
							<div style="width: 1.5rem;">{{item.createTime}}</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		
		<div class="count">
			<div class="total_tip">
				退款结算
			</div>
			<div class="table">
				<div class="thead">
					<div style="width: 1.8rem;">名称</div>
					<div style="width: 1.2rem;">分类</div>
					<div style="width: 1.2rem;">单价</div>
					<div style="width: 1.2rem;">购买数量</div>
					<div style="width: 1.2rem;">总价</div>
					<div style="width: 1.2rem;">实际支付</div>
					<div style="width: 1.2rem;">应退费</div>
					<div style="width: 1.2rem;">操作</div>
				</div>
				<div class="tbody">
					<div class="tr_div" v-for="item,index in countList">
						<div class="tr">
							<div style="width: 1.8rem;">{{item.goodsName}}</div>
							<div style="width: 1.2rem;">{{item.goodsMode}}</div>
							<div style="width: 1.2rem;">￥{{item.salesPrice}}</div>
							<div style="width: 1.2rem;">{{item.goodsNum}}</div>
							<div style="width: 1.2rem;">￥{{item.totalMoney}}</div>
							<div style="width: 1.2rem;">￥{{item.realMoney}}</div>
							<div style="width: 1.2rem;">￥{{item.realMoney}}</div>
							<div style="width: 1.2rem;">
							<div class="btn_del" @click="delCount(index)">删除</div>
						</div>
						</div>
					</div>
				</div>
				
				<div class="compute">
					已选定 {{check_num}} 个商品
					<div class="compute_money">
						总计退费：￥{{totalMoney}}
					</div>
				</div>
			</div>
		</div>

			
		<div class="btn_div">
			<div :class="hasGoods?'btn_sure':'btn_disable'" @click="ok()">
			    确定退款
			</div>
			<div class="btn_cancel" @click="back()">上一步</div>
		</div>
	</div>
</template>

<script>
	
var vm,dict;
export default {
	data : function() {
		return {
			student : {},
			//课程和商品总数
			goodsNum : null,
			//课程,商品,结算列表
			goodsList : [],
			countList : [],
			//订单类型
			orderMode : null,
			//被勾选数组
			checkList:[],
			//数据字典
			goodsMapMap : null,
		}
	},
	computed : {
		hasGoods : function() {
			return this.goodsList.length > 0;
		},
		check_num : function() {
			return this.checkList.length;
		},
		totalMoney : function() {
			var realMoney = 0;
			this.countList.forEach(function(count) {
				realMoney += count.realMoney;
			});
			return parseFloat(realMoney.toFixed(2));
		}
	},
	methods : {
		init : function(student) {
			var p =  student.studentParentEntityList;
			if(p && p.length>0) {
				student.parentName = p[0].parentName;
				student.phone = p[0].phone;
			}
			
			vm.student = student;
			//清空总数
			vm.goodsNum = null;
			
			//清空数据列表
			vm.countList = [];
			//清空选择列表
			vm.checkList = [];
			
			//查询商品列表
			vm.searchGoods();
		},
		ok : function() {
			//没有可退商品,不处理
			if(!vm.hasGoods) {
				return;
			}
			//没有勾选商品
			if(vm.countList.length==0 ) {
				tool.message({ showClose: true, message: "请至少选择一种商品", type: 'warning' });
				return;
			}
			vm.$emit('ok',vm.countList);
		},
		close : function() {
			vm.$emit('close');
		},
		back : function() {
			vm.$emit('back');
		},
		checkGoods : function(goods) {
			var id = goods.studentGoodsId;
			goods.id = id;
			//别名
			var checks = vm.checkList;
			var counts = vm.countList;
			//判断是否被勾选
			var index = checks.indexOf(id);
			if(index>-1) {
				//已被勾选,从两个列表中删除
				for(var i=0; i<counts.length; i++) {
					if(counts[i].id == id) {
						counts.splice(i,1);
						break;
					}
				}
				checks.splice(index,1);
				return;
			}
			//加入列表
			counts.push(goods);
			checks.push(id);
			
		},
		searchGoods : function() {
			//重置商品列表
			vm.goodsList = [];
			api.goodsByStudent({studentId : vm.student.studentId}).then(function(data) {
				//遍历返回数据
				data.info.forEach(function(item) {
					item.goodsMode = vm.goodsModeMap[item.goodsMode];
					//加到商品列表中
					if(item.courseStatus != 3) {
						vm.goodsList.push(item);
					}
				})
			});
			
			setTimeout(function(){
				if(!vm.hasGoods) {
					tool.message({ showClose: true, message: "该学员暂无可退商品", type: 'warning' });
				}
			},100)
			
		},
		delCount : function(index) {
			//别名
			var counts = vm.countList;
			var checks = vm.checkList;
			
			var id = counts[index].id;
			//从两个列表删除数据
			checks.splice(checks.indexOf(id),1);
			counts.splice(index,1);
			
		},
	},
	created : function() {
		vm = this;
		dict = tool.getItem(lsKey.dict,true);
		vm.goodsModeMap = tool.parseDict(dict["goods_mode"]);
		
	}
}

</script>
<style scoped src="@/style/module/dialog.css"></style>
<style scoped src="@/style/module/table2.css"></style>
<style scoped>
	
	.btn_div {
		padding: 0.2rem 0;
	}
	/* ----------信息栏---------- */
	.info {
		/*outline: 1px solid red;*/
		font-size: 0.16rem;
		color: #666666;
		overflow: hidden;
		padding: 0.1rem 0 0 0.4rem;
	}
	.info>div {
		float: left;
		width: 2.8rem;
	}
	
	/* ----------课程---------- */
	.content {
		padding: 0 0.3rem;
	}
	.condition {
		height: 0.38rem;
		margin-top: 0.1rem;
		margin-bottom: 0.05rem;
		/*outline: 1px solid red;*/
	}
	.tip {
		float: left;
		line-height: 0.38rem;
		color: #333333;
		font-size: 0.18rem;
		font-weight: bold;
	}
	.search {
		float: right;
		width: 3.5rem;
	}
	
	
	.tr_icon,.sub_icon {
		float: left;
		width: 0.4rem;
		height: 0.3rem !important;
		margin-top: 0.11rem;
		/*outline: 0.01rem solid red;*/
		background-size: 0.18rem;
		background-repeat: no-repeat;
		background-position: 0.15rem center;
		cursor: pointer;
	}
	.sub_icon {
		margin-left: 0.2rem;
		background-image: url(../../../assets/img/clue_manage/check_no.png);
	}
	.sub_icon_active {
		background-image: url(../../../assets/img/clue_manage/check_yes.png);
	}
	.tr_icon {
		background-image: url(../../../assets/img/clue_manage/enroll_open.png);
	}
	.tr_icon_active {
		background-image: url(../../../assets/img/clue_manage/enroll_close.png);
	}
	
	.sub_time {
		float: right;
		width: 1.4rem;
	}
	.sub_money {
		float: right;
		width: 0.85rem;
	}
	
	.page {
		text-align: right;
		padding: 0.05rem 0.2rem;
	}
	
	/* ----------结算---------- */
	.count {
		padding: 0 0.3rem;
	}
	
	.total_tip {
		line-height: 0.38rem;
		color: #333333;
		font-size: 0.18rem;
		font-weight: bold;
		margin: 0.15rem 0 0.05rem 0;
	}
	.type {
		margin-left: 0.1rem;
		display: inline-block;
		height: 0.2rem;
		line-height: 0.2rem;
		font-size: 0.12rem;
		background-color: #3885F8;
		color: white;
		border-radius:0.05rem ;
		padding: 0 0.05rem;
		margin-right: 0.03rem;
	}
	
	.tr_two_row {
		padding-top: 0.05rem;
		line-height: 0.2rem;
	}
	.btn_add,.btn_reduce {
		display: inline-block;
		width: 0.25rem;
		height: 0.25rem;
		line-height: 0.25rem;
		margin-top: 0.11rem; 
		/*float: left;*/
		/*outline: 1px solid red;*/
		font-size: 0.2rem;
		color: #3885F8;
		cursor: pointer;
		user-select:none;
	}
	.btn_reduce {
		/*margin-left: 0.3rem;*/
	}
	.buy_num {
		display: inline-block;
		width: 0.4rem;
		/*float: left;*/
		/*outline: 1px solid red;*/
		color: #3885F8;
	}
	.btn_del {
		/*outline: 1px solid red;*/
		width: 0.6rem;
		height: 0.25rem;
		line-height: 0.25rem;
		margin: 0.12rem auto 0 auto;
		text-align: left;
		padding-left: 0.22rem;
		color: #3885F8;
		background-image: url(../../../assets/img/clue_manage/enroll_del.png);
		background-size: 0.18rem;
		background-repeat: no-repeat;
		background-position: left center;
		cursor: pointer;
	}
	.compute {
		position: relative;
		line-height: 0.48rem;
		height: 0.48rem;
		text-align: center;
		background-color: rgb(248,249,253);
		color: #333333;
		font-size: 0.16rem;
	}
	.compute_money {
		position:absolute;
		width: 2rem;
		height: 0.48rem;
		right: 0.3rem;
		top: 0;
		text-align: right;
		font-weight: bold;
		color: #3885F8;
		/*outline: 1px solid blue;*/
	}
</style>